{%extends "base.html"%}
{%block title%}
后台管理
{%endblock%}
{%block body%}

<script>
    let admin;
    $(document).ready(() => {
        admin = new Vue({
            el: "#admin",
            delimiters: ['{[', ']}'],
            data: {
                data: null,
                done: false,
                currentTab: "general",
                ratedContests: [],
                permissionGroups: [],

                userTab: {
                    loading: false, successMessage: "", errorMessage: "",
                    userData: [],
                    currentuid: -1
                }
            }, methods: {
                addUser() {
                    let uid = this.userTab.currentuid;
                    this.userTab.successMessage = this.userTab.errorMessage = "";
                    axios(
                        {
                            url: "/api/get_user_profile",
                            method: "post",
                            data: "uid=" + uid
                        }
                    ).then(resp => {
                        let data = resp.data;
                        if (data.code) {
                            this.userTab.errorMessage = data.message;
                            return;
                        }
                        this.userTab.userData.push({
                            uid: uid,
                            username: data.data.username,
                            permissions: []
                        })
                    });
                },
                addUserPermission(uid, evt, index) {
                    console.log(uid, evt);
                    this.userTab.successMessage = this.userTab.errorMessage = "";
                    axios.post("/api/admin/add_user_permission", {
                        uid: uid, permission: evt.target.value
                    }).then(resp => {
                        let data = resp.data;
                        if (data.code) {
                            this.userTab.errorMessage = data.message;
                            return;
                        }
                        this.userTab.userData[index].permissions.push(evt.target.value)
                        // this.userTab.userData[userIndex].permissions.splice(index, 1);
                    });
                },
                removeUserPermission(uid, index, userIndex) {
                    this.userTab.successMessage = this.userTab.errorMessage = "";
                    axios.post("/api/admin/remove_user_permission", {
                        uid: uid, index: index
                    }).then(resp => {
                        let data = resp.data;
                        if (data.code) {
                            this.userTab.errorMessage = data.message;
                            return;
                        }
                        this.userTab.userData[userIndex].permissions.splice(index, 1);
                    });
                },
                reloadRatedContests() {
                    axios.post("/api/admin/rating/rated_contests").then(x => {
                        let rating = x.data;
                        this.ratedContests = rating.data;
                    });
                },
                removeRatedContest(contestID) {
                    console.log(contestID);
                    const thiz = this;
                    $("#remove-rated-contest-modal").modal({
                        closable: false,
                        onApprove: function () {
                            axios.post("/api/admin/rating/remove", { contestID: contestID }).then(x => {
                                let data = x.data;
                                if (data.code) {
                                    showErrorModal(data.message);
                                    return;
                                }
                                thiz.reloadRatedContests();
                            });
                        }
                    }).modal("show");

                }, appendRatedContest(contestID) {
                    if (isNaN(parseInt(contestID))) {
                        showErrorModal("请输入合法整数");
                        return;
                    }
                    // console.log(contestID);
                    axios.post("/api/admin/rating/append", {
                        contestID: parseInt(contestID)
                    }).then(x => {
                        let data = x.data;
                        if (data.code) {
                            showErrorModal(data.message);
                            return;
                        }
                        this.reloadRatedContests();
                    });
                }, updatePermissionGroups() {
                    axios.post("/api/admin/rating/permission_groups/update", {
                        groups: this.permissionGroups
                    }).then(x => {
                        let data = x.data;
                        if (data.code) {
                            showErrorModal(data.message);
                            return;
                        }
                        window.location.reload();
                    });
                }
            }, mounted() {
                axios.all([
                    axios.post("/api/admin/show"),
                    axios.post("/api/admin/rating/rated_contests"),
                    axios.post("/api/admin/rating/permission_groups/get"),
                    axios.post("/api/admin/get_user_permissions")
                ]).then(axios.spread((show, rating, groups, permission_list) => {
                    show = show.data;
                    if (show.code) {
                        showErrorModal(show.message);
                        return;
                    }
                    this.data = show.data;
                    this.ratedContests = rating.data.data;
                    this.permissionGroups = groups.data.result;
                    this.userTab.userData = permission_list.data.data;
                    this.done = true;
                }));
            }
        });

    });
</script>
<div id="admin" v-if="done">
    <div class="ui header">
        <h1>后台管理</h1>
    </div>
    <div class="ui top attached tabular menu">
        <div class="item" v-bind:class="{active:currentTab=='general'}" v-on:click="currentTab='general'">概览</div>
        <div class="item" v-bind:class="{active:currentTab=='rating'}" v-on:click="currentTab='rating'">Rating管理</div>
        <div class="item" v-bind:class="{active:currentTab=='settingPreview'}" v-on:click="currentTab='settingPreview'">
            设置预览</div>
        <div class="item" v-bind:class="{active:currentTab=='permissionGroup'}"
            v-on:click="currentTab='permissionGroup'">
            权限组设定</div>
        <div class="item" v-bind:class="{active:currentTab=='user'}" v-on:click="currentTab='user'">
            用户管理</div>



    </div>
    <div class="ui bottom attached tab segment stacked" v-bind:class="{active:currentTab=='general'}">
        <div class="ui three column grid">
            <div class="ui row">
                <div class="ui column">
                    <div class="ui statistic">
                        <div class="value">
                            <i class="tasks icon"></i> {[data.problemCount]}
                        </div>
                        <div class="label">
                            题目数量
                        </div>
                    </div>
                </div>
                <div class="ui column">
                    <div class="ui statistic">
                        <div class="value">
                            <i class="tasks icon"></i> {[data.publicProblemCount]}
                        </div>
                        <div class="label">
                            公开题目数量
                        </div>
                    </div>
                </div>
                <div class="ui column">
                    <div class="ui statistic">
                        <div class="value">
                            <i class="address card icon"></i>{[data.userCount]}
                        </div>
                        <div class="label">
                            用户数量
                        </div>
                    </div>
                </div>
            </div>
            <div class="ui row">
                <div class="ui column">
                    <div class="ui statistic">
                        <div class="value">
                            <i class="hdd icon"></i> {[data.submissionCount]}
                        </div>
                        <div class="label">
                            提交数量
                        </div>
                    </div>
                </div>
                <div class="ui column">
                    <div class="ui statistic">
                        <div class="value">
                            <i class="hdd icon"></i> {[data.acceptedSubmissionCount]}
                        </div>
                        <div class="label">
                            通过提交数量
                        </div>
                    </div>
                </div>
                <div class="ui column">
                    <div class="ui statistic">
                        <div class="value">
                            <i class="keyboard outline icon"></i> {[data.discussionCount]}
                        </div>
                        <div class="label">
                            讨论数量
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="ui bottom attached tab segment stacked" v-bind:class="{active:currentTab=='rating'}">
        <div class="ui input">
            <input type="text" placeholder="输入要应用Rating的比赛ID.." style="width: 300px;"
                v-on:keyup.enter="appendRatedContest(parseInt($event.srcElement.value))">
        </div>
        <div class="ui divider"></div>
        <table class="ui very basic celled table">
            <thead>
                <tr>
                    <th>比赛名</th>
                    <th>参赛人数</th>
                    <th>Rated 时间</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in ratedContests">
                    <td><a :href='"/contest/"+item.contestID'>{[item.contestName]}</a></td>
                    <td>{[item.contestantCount]}</td>
                    <td>{[item.ratedTime]}</td>
                    <td>
                        <div class="ui tiny red circular icon button" v-on:click="removeRatedContest(item.contestID)">
                            <i class="ui times icon"></i>
                        </div>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="ui bottom attached tab segment stacked" v-bind:class="{active:currentTab=='settingPreview'}">
        <table class="ui very basic celled table">
            <thead>
                <tr>
                    <th>配置名</th>
                    <th>值</th>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in data.settings">
                    <td>{[item.key]}</td>
                    <td>{[item.value]}</td>
                    <td>{[item.description]}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <div class="ui bottom attached tab segment stacked" v-bind:class="{active:currentTab=='permissionGroup'}">
        <div v-for="item,i in permissionGroups">
            <div class="ui header">
                <h3>{[item.name]}</h3>

            </div>
            <div class="ui form">
                <div class="ui field">
                    <label>权限组ID</label>
                    <input v-model="item.id">
                </div>
                <div class="ui field">
                    <label>权限组名</label>
                    <input v-model="item.name">
                </div>
                <div class="ui field">
                    <label>继承自</label>
                    <input v-model="item.inherit">
                </div>

                <div class="ui field">
                    <label>权限列表</label>
                    <textarea v-model="item.permissions"></textarea>
                </div>
                <div class="ui red button" v-on:click="permissionGroups.splice(i,1)">删除</div>
            </div>
            <div class="ui divider"></div>
        </div>
        <div class="ui green button" v-on:click="permissionGroups.push({id:'qwq',name:'qwq',permission:''})">添加</div>
        <div class="ui green button" v-on:click="updatePermissionGroups">提交</div>
    </div>
    <div class="ui bottom attached tab segment stacked" v-bind:class="{active:currentTab=='user'}">
        <div class="ui success message" v-if="userTab.successMessage!=''">
            <div class="ui header">
                操作成功
            </div>
            <div>
                {[userTab.successMessage]}
            </div>
        </div>
        <div class="ui error message" v-if="userTab.errorMessage!=''">
            <div class="ui header">
                操作失败
            </div>
            <div>
                {[userTab.errorMessage]}
            </div>
        </div>
        <div class="ui header">
            <h2>用户权限编辑</h2>
        </div>
        <div v-for="user,user_index in userTab.userData">
            <div class="ui header">
                <h3>{[user.username]}</h3>
            </div>
            <div class="ui list">
                <div class="item" v-for="perm,i in user.permissions">
                    <span>{[perm]}
                    </span>
                    <div class="ui tiny red button" v-on:click="removeUserPermission(user.uid,i,user_index)">
                        删除
                    </div>
                </div>
            </div>
            <div class="ui input">
                <input type="text" v-on:keyup.enter="addUserPermission(user.uid,$event,user_index)"
                    placeholder="输入权限后按回车添加">
            </div>
            <div class="ui divider"></div>
        </div>
        <div>
            <div class="ui input">
                <input type="text" v-model.number="userTab.currentuid" placeholder="用户ID">
            </div>
            <div class="ui green button" v-on:click="addUser">添加用户</div>
        </div>
    </div>
</div>
<div class="ui tiny modal" id="remove-rated-contest-modal">
    <div class="ui header">
        您确定要取消一场比赛的Rated吗？
    </div>
    <div class="content">
        <p>进行此操作后，这场比赛以及在这场比赛之后的比赛都将会被取消Rated.</p>
    </div>
    <div class="actions">
        <div class="ui green approve button">确定</div>
        <div class="ui red cancel button">关闭</div>
    </div>
</div>
<div class="ui tiny modal" id="remove-users-modal">
    <div class="ui header">
        您确定要删除这些用户吗？
    </div>
    <div class="content">
        <p>进行此操作后，这些账户以及他们所创建的数据将不复存在。</p>
    </div>
    <div class="actions">
        <div class="ui green approve button">确定</div>
        <div class="ui red cancel button">关闭</div>
    </div>
</div>
{%endblock%}